<template>
  <Navbar title="分类" />

  <div class="wrap">
    <!-- 左侧菜单 -->
    <van-sidebar v-model="active">
      <van-sidebar-item
        v-for="item in sideBarList"
        :key="item"
        :title="item"
        @click="sideBarClick(item)"
      />
    </van-sidebar>

    <div class="right">
      <van-tabs v-model:active="active2" @click-tab="tabClick">
        <van-tab
          v-for="item in brandList"
          :key="item.brand"
          :title="item.brand"
        >
          <van-grid :column-num="3">
            <van-grid-item
              v-for="value in proList"
              :key="value.proid"
              :icon="value.img1"
              :text="value.brand"
            />
          </van-grid>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from "@/components/Navbar.vue";
import { ref, onMounted } from "vue";
import {
  getCategorylistApi,
  getBrandlistApi,
  getProlistApi,
} from "@/api/classify";

const active = ref(0);

// 获取到左侧菜单列表
const sideBarList = ref([]);
const brandList = ref<
  {
    brand: string;
  }[]
>([]);
const proList = ref<any>([]);
// 需要先拿到左侧的列表数据，才能去获取上面的tab数据
// 请求需要有先后顺序
onMounted(async () => {
  const res = await getCategorylistApi();
  if (res) {
    sideBarList.value = res.data;
    category.value = res.data[0];
    const res2 = await getBrandlistApi({ category: res.data[0] });
    if (res2) {
      brandList.value = res2.data;
      const res3 = await getProlistApi({
        category: res.data[0],
        brand: res2.data[0].brand,
      });
      if (res3) {
        console.log(res3);
        proList.value = res3.data;
      }
    }
  }
});

// 右边的tab

// onMounted(async () => {
//   const res = await getBrandlistApi({ category: "手机" });
//   if (res) {
//     brandList.value = res.data;
//   }
// });
const active2 = ref(0);
const category = ref("");
const sideBarClick = async (item: string) => {
  // console.log("sideBarClick", item);
  category.value = item;
  const res = await getBrandlistApi({ category: item });
  if (res) {
    active2.value = 0;
    brandList.value = res.data;
    const res2 = await getProlistApi({
      category: category.value,
      brand: res.data[0].brand,
    });
    if (res2) {
      proList.value = res2.data;
    }
  }
};

const tabClick = async ({ title }: { title: string }) => {
  const res = await getProlistApi({
    category: category.value,
    brand: title,
  });
  if (res) {
    proList.value = res.data;
  }
};
</script>

<style scoped lang="less">
.van-sidebar-item--select:before {
  background: @theme-color;
}

.wrap {
  display: flex;

  .right {
    flex: 1;
  }
}

:deep(.van-tabs__line) {
  display: none;
}

:deep(.van-tab--active) {
  span {
    color: @theme-color;
  }
}
</style>
